<template>
  <div class="main main_bg">
    <div class="title container bg-fff">{{title}}</div>
    <div class="centerTip db">
      <div class="tac flex">{{$t('set.set_trade_password_tip')}}</div>
    </div>
    <ul class="list container bg-fff">
      <li class="db">
        <div class="name">{{text}}</div>
        <div class="str flex">
          <input
            type="password"
            class="inp"
            v-model="password"
            onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9] /g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            oninput="if(value.length>6)value=value.slice(0,6)"
            :placeholder="textplaceholder"
          /> 
        </div>
      </li>
      <li class="db">
        <div class="name">{{retext}}</div>
        <div class="str flex">
          <input type="password" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9] /g,'')}else{this.value=this.value.replace(/\D/g,'')}" v-model="confirmPassword" oninput="if(value.length>6)value=value.slice(0,6)" class="inp" :placeholder="retextplaceholder" />
        </div>
      </li>
    </ul>

    <div class="container fixedBtn">
      <button class="btn" @click="handleSubmit()">{{btn}}</button>
    </div>

    <div class="b_h"></div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "设置交易密码",
    },
    text: {
      type: String,
      default: "输入密码",
    },
    textplaceholder: {
      type: String,
      default: "请输入6位数密码",
    },
    retext: {
      type: String,
      default: "确认密码",
    },
    retextplaceholder: {
      type: String,
      default: "确认6位数密码",
    },
    btn: {
      type: String,
      default: "保存",
    },
  },
  data() {
    return {
      isCodePass: false,
      password: "",
      confirmPassword: ""
    };
  },
  methods: {
    handleSubmit() {
      if (this.password == "") {
        this.$toast(this.text+this.$t('toast.pw_01'));
        return;
      }

      if (this.confirmPassword == "") {
        this.$toast(this.retext+this.$t('toast.pw_01'));
        return;
      }
      if (this.password.length < 6){
        this.$toast(this.text+this.$t('toast.pw_02'));
        return;
      }
      if (this.password != this.confirmPassword){
        this.$toast(this.$t('toast.pw_03'));
        return;
      }
      let data = {
        password: this.$md5(this.password),
        confirmPassword: this.$md5(this.confirmPassword),
      };
      this.$emit("callback", data);
    },
  },
};
</script>
<style lang="less" scoped>
#app {
  .title {
    margin-top: 0.2rem;
    height: 0.66rem;
    font-size: 0.3rem;
    font-weight: 400;
    text-align: center;
  }
  .centerTip {
    font-size: 0.26rem;
    color: #F53831;
    height: 1.2rem;
    text-align: center;
  }
  .list {

    li {
      height: 1rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px -0.02rem 0px 0px rgba(243, 243, 243, 1);
      .name {
        font-size: 0.3rem;
        font-weight: 400;
        color: rgba(20, 25, 31, 1);
      }
      .str {
        .inp {
          text-align: right;
          width: 100%;
          font-size: 0.3rem;
          border: 0;
        }
      }
    }
  }
  .list:nth-child(3) {
    margin-bottom: 0.7rem;
  }
  .btn2 {
    height: 0.66rem;
    border-radius: 0.08rem;
    border: 0.02rem solid rgba(31, 159, 255, 1);
    background: #fff;
    margin-left: 0.2rem;
    font-size: 0.26rem;
    color: #1f9fff;
    padding: 0 0.2rem;
  }
  .fixedBtn {
    button {
      margin-top: 0.38rem;
    }
  }
}
</style>
